<template>
  <el-menu
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      style="height: 100%"
      default-active="/Home"
      :collapse="isCollapse"
      :collapse-transition="false"
      router>

    <el-menu-item index="/Home">
      <i class="el-icon-s-home"></i>
      <span slot="title">首页</span>
    </el-menu-item>

    <el-menu-item :index="'/'+item.menuclick" v-for="(item,i) in menu" :key="i">
      <i :class="item.menuicon"></i>
      <span slot="title">{{ item.menuname }}</span>
    </el-menu-item>

  </el-menu>
</template>

<script >
  export default {
    name:"MyAside",
    //computed 是一种基于依赖的数据缓存。
    //它会自动追踪其依赖的属性（例如 data 或 Vuex state 中的数据）。
    //当依赖的数据变化时，computed 属性的值会自动重新计算并更新。
    computed: {
        // computed 是 Vue 的计算属性，用于声明一个依赖于其他数据的属性，能够在依赖的数据变化时自动重新计算。
        "menu": {
          get() {
              return this.$store.state.menu
            // 从 this.$store.state.menu 中获取数据，这意味着 menu 属性的值会实时同步 Vuex 中 state.menu 的值
            }
        }
    },
    props:{
      isCollapse: Boolean
    }
  }
</script>

<style>

</style>